<%--
  Created by IntelliJ IDEA.
  User: jose
  Date: 16/02/13
  Time: 23:21
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="basic"/>
    <title>Donde El Mapa Tiene Vida</title>

    <r:require module="jquery-ui"/>
    <g:javascript library="jquery"/>

    <jqui:resources themeCss="../css/jquery/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.Jcrop.css')}"/>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'estilo.css')}"/>
    <g:javascript src="../js/jquery/jquery.Jcrop.js"/>
    <g:javascript src="../js/jquery/jquery.Jcrop.min.js"/>

    <script type="text/javascript" src="../js/jquery/jquery-ui-i18n.min.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript" src="../js/OpenLayers.js"></script>
    <g:javascript>

        var map = null;
        var markers = new OpenLayers.Layer.Markers( "Markers" );
        var proj4326 = new OpenLayers.Projection("EPSG:4326");
        var projmerc = new OpenLayers.Projection("EPSG:900913");
        function showMap() {


            var lonlat = new OpenLayers.LonLat(-66, 9);
            lonlat.transform(proj4326, projmerc);
            map = new OpenLayers.Map("MyMap");
            map.addLayer(new OpenLayers.Layer.OSM());
            map.setCenter(lonlat, 5);

        }
        function obtenerDengue(){
        markers.clearMarkers();
            ${remoteFunction(
            controller: 'salaSituacional',
            action: 'ajaxObtenerDengue',
            update: 'respuesta',
            onComplete: 'moverMapa()',
            asynchronous: 'false'
    )}
        }
        function obtenerEmbarazo(){
        markers.clearMarkers();
        ${remoteFunction(
                controller: 'salaSituacional',
                action: 'ajaxObtenerEmbarazo',
                update: 'respuesta',
                onComplete: 'moverMapa()',
                asynchronous: 'false'
        )}
        }

        function moverMapa(){

                markers.clearMarkers();
                var lonlat = null;
               jQuery(".latlon").each(
			    function(index) {
				var vx = jQuery('#lat_coordenadas_calle'+index).attr('value');
				var vy = jQuery('#lon_coordenadas_calle'+index).attr('value');

				lonlat = new OpenLayers.LonLat(vy,vx);
                lonlat.transform(proj4326, projmerc);
                map.addLayer(markers);
                markers.addMarker(new OpenLayers.Marker(lonlat));

			    });
                map.setCenter(lonlat,16)


    }

    jQuery(document).ready(function () {
        jQuery.datepicker.setDefaults(jQuery.datepicker.regional['${session.'org.springframework.web.servlet.i18n.SessionLocaleResolver.LOCALE'}']);

        jQuery('.Date').datepicker({dateFormat:'dd-mm-yy',
            changeYear:true,
            //altField: '#actualDate',
            buttonText:'Calendario',
            buttonImage:'/sos/images/datepicker.gif',
            maxDate:new Date(),
            minDate:new Date(1900, 9, 15),
            yearRange:'1900:2100',
            constrainInput:true,
            showButtonPanel:true,
            showOn:'button'


        });
        jQuery("#fechaNacimiento").attr("readonly", true);

        jQuery("#fechaNacimiento").click(function () {

            jQuery(this).val('');

        });
    });


    </g:javascript>
</head>
<!--onload="showMap()" -->
<body onload="showMap()">
<div id="menu1">
    <ul>

        <li>
            <a class="selected">Historia Integral</a>
        </li>
    </ul>
</div>

<div id="nivel1">

    <table>
        <tr>
            <td><div id="menu3">
                <ul>
                    <li>
                        <a class='selected contextoEhr'>
                            Resumen clínico
                        </a>
                    </li>
                    <br/>
                    <li>
                        <a href="#" onclick="obtenerDengue()" class="contextoEhr">Dengue</a>
                    </li>
                    <li>
                        <a href="#" onclick="obtenerEmbarazo()" class="contextoEhr">Embarazo</a>

                    </li>
                    <li>
                        <a href="http://www.openstreetmap.org/edit?editor=id&lat=10.504675&lon=-66.91905&zoom=18"  class="contextoEhr">editar</a>

                    </li>
                    <br/>
                    <br/>
                    <br/>
                    <li>

                        <div id="respuesta">

                        </div>
                    </li>

                </ul>
            </div></td>
            <td>

                <div id="MyMap" style="width: 800;
                height: 380;
                border-style: solid;
                border-width: 5px;
                border-color: #c1c1c1;">
                </div>

            </td>

        </tr>

    </table>

</div>
</body>
</html>